const path = require('path');
const {
    name
} = require('./package');

function resolve(dir) {
    //path.join(__dirname)设置绝对路径
    return path.join(__dirname, dir)
}
module.exports = {
    // 输出文件目录
    outputDir: "build/"+name,
    // 配置js、css等文件夹的二级目录位置，不设置则会在dist下生成4个文件夹
    chainWebpack: (config) => {
        config.resolve.alias
            //set第一个参数：设置的别名，第二个参数：设置的路径
            .set('@', resolve('./src'))
            .set('styles', resolve('./src/styles'))
            .set('libs', resolve('./src/libs'))
            .set('views', resolve('./src/views'))
            
            .set('utils', resolve('./src/utils'))
            .set('tools', resolve('./src/tools'))
            .set('directives', resolve('./src/directives'))
            .set('components', resolve('./src/components'));

        config.module
            .rule('fonts')
            .test(/.(ttf|otf|eot|woff|woff2)$/)
            .use('url-loader')
            .loader('url-loader')
            .tap(options => ({
                name: '/fonts/[name].[hash:8].[ext]'
            }))
            .end()
    },
    configureWebpack: {
        output: {
            library: `${name}-[name]`,
            libraryTarget: 'umd', // 把子应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${name}`,
        }
    },
    //关闭SourceMap
    //map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
    // 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
    productionSourceMap: false,
    // 关闭eslint语法等检验
    lintOnSave: false,
    devServer: {
        // disableHostCheck: true
        // 配置自动启动浏览器
        open: true,
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
        port: 9101,
    },
    transpileDependencies: ['single-spa', 'qiankun', 'import-html-entry'],
}